<!-- Footer container - implements flex-direction: column effect -->
<table
  width="100%"
  border="0"
  cellpadding="0"
  cellspacing="0"
  style="max-width: 400px; margin: 0 auto"
>
  <tr>
    <td align="center" style="padding: 0">
      <!-- Footer content items -->
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!-- Footer first row - divider line -->
        <tr>
          <td align="center" style="padding-bottom: 24px">
            <div
              role="separator"
              style="
                height: 1px;
                line-height: 1px;
                background-color: #e4e8f5;
                margin: 0;
                width: 100%;
              "
            ></div>
          </td>
        </tr>

        <!-- Footer second item - brand tagline -->
        <tr>
          <td align="center" style="padding-bottom: 8px">
            <div
              style="
                color: #6f748c;
                text-align: center;
                font-family:
                  &quot;SF Pro Text&quot;,
                  -apple-system,
                  BlinkMacSystemFont,
                  &quot;Segoe UI&quot;,
                  Roboto,
                  Helvetica,
                  Arial,
                  sans-serif;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                letter-spacing: 0.1px;
                margin: 0;
                padding: 0;
              "
            >
              Bring projects, knowledge, and teams together with the power of
              AI.
            </div>
          </td>
        </tr>

        <!-- Footer third item - social media links -->
        <tr>
          <td align="center" style="padding-bottom: 8px">
            <!-- Social media links container - implements flex gap: 4px effect -->
            <table
              border="0"
              cellpadding="0"
              cellspacing="0"
              style="margin: 0 auto"
            >
              <tr>
                <td style="padding-right: 12px">
                  <a
                    href="https://twitter.com/appflowy"
                    style="
                      text-decoration: none;
                      display: inline-block;
                      width: 28px;
                      height: 28px;
                      text-align: center;
                      line-height: 28px;
                    "
                  >
                    <img
                      src="{{ cdnBaseUrl }}images/twitter.png"
                      width="20"
                      height="20"
                      alt="Twitter"
                      style="border: 0; vertical-align: middle"
                    />
                  </a>
                </td>
                <td style="padding-right: 12px">
                  <a
                    href="https://www.reddit.com/r/AppFlowy"
                    style="
                      text-decoration: none;
                      display: inline-block;
                      width: 28px;
                      height: 28px;
                      text-align: center;
                      line-height: 28px;
                    "
                  >
                    <img
                      src="{{ cdnBaseUrl }}images/reddit.png"
                      width="20"
                      height="20"
                      alt="Reddit"
                      style="border: 0; vertical-align: middle"
                    />
                  </a>
                </td>
                <td style="padding-right: 12px">
                  <a
                    href="https://github.com/AppFlowy-IO/AppFlowy"
                    style="
                      text-decoration: none;
                      display: inline-block;
                      width: 28px;
                      height: 28px;
                      text-align: center;
                      line-height: 28px;
                    "
                  >
                    <img
                      src="{{ cdnBaseUrl }}images/github.png"
                      width="20"
                      height="20"
                      alt="GitHub"
                      style="border: 0; vertical-align: middle"
                    />
                  </a>
                </td>
                <td>
                  <a
                    href="https://discord.gg/9Q2xaN37tV"
                    style="
                      text-decoration: none;
                      display: inline-block;
                      width: 28px;
                      height: 28px;
                      text-align: center;
                      line-height: 28px;
                    "
                  >
                    <img
                      src="{{ cdnBaseUrl }}images/discord.png"
                      width="20"
                      height="20"
                      alt="Discord"
                      style="border: 0; vertical-align: middle"
                    />
                  </a>
                </td>
              </tr>
            </table>
          </td>
        </tr>

        <!-- Footer fourth item - copyright information -->
        <tr>
          <td align="center">
            <div
              style="
                color: #6f748c;
                text-align: center;
                font-family:
                  &quot;SF Pro Text&quot;,
                  -apple-system,
                  BlinkMacSystemFont,
                  &quot;Segoe UI&quot;,
                  Roboto,
                  Helvetica,
                  Arial,
                  sans-serif;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 18px;
                letter-spacing: 0.1px;
                margin: 0;
                padding: 0;
              "
            >
              <!-- Copyright text (normal style) -->
              <div
                style="
                  color: #6f748c;
                  font-family:
                    &quot;SF Pro Text&quot;,
                    -apple-system,
                    BlinkMacSystemFont,
                    &quot;Segoe UI&quot;,
                    Roboto,
                    Helvetica,
                    Arial,
                    sans-serif;
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 18px;
                  letter-spacing: 0.1px;
                "
              >
                Copyright © 2025, AppFlowy Inc.
              </div>
              <div
                style="
                  color: #6f748c;
                  font-family:
                    &quot;SF Pro Text&quot;,
                    -apple-system,
                    BlinkMacSystemFont,
                    &quot;Segoe UI&quot;,
                    Roboto,
                    Helvetica,
                    Arial,
                    sans-serif;
                  font-size: 12px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 18px;
                  letter-spacing: 0.1px;
                "
              >
                Need Help?
                <!-- Email link (with underline style) -->
                <a
                  href="mailto:support@appflowy.io"
                  style="
                    color: #6f748c;
                    font-family:
                      &quot;SF Pro Text&quot;,
                      -apple-system,
                      BlinkMacSystemFont,
                      &quot;Segoe UI&quot;,
                      Roboto,
                      Helvetica,
                      Arial,
                      sans-serif;
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 18px;
                    letter-spacing: 0.1px;
                    text-decoration-line: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: none;
                    text-decoration-thickness: auto;
                    text-underline-offset: auto;
                  "
                  >support@appflowy.io</a
                >
              </div>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
